<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>NBA不同球队的场均平均得分柱状图</title>
    <script src="../static/js/echarts.min.js"></script>
    <script src="../static/theme/vintage.js"></script>
</head>
<body>
<div class="cart" style="width: 1600px;height: 600px;margin: auto"></div>
<script>
    var myCharts = echarts.init(document.querySelector('.cart'),'vintage')
    var team = {{ team|tojson }}
    var score = {{ score|tojson }}
    var option = {
        title:{
            text:"NBA不同球队的场均平均得分",
            textStyle:{
                fontFamily:'楷体',
                fontSize:21
            },
            left:10,
            top:10
        },
        xAxis:{
            type:'category',
            data:team,
            axisLabel:{
                interval:0,
                margin:10,
                rotate:40
            }
        },
        yAxis:{
            type:'value'
        },
        legend:{
            name:['场均得分']
        },
        tooltip:{
            trigger:'item',
            triggerOn:'mousemove',
            formatter:function (res)
            {
                return '球队：'+res.name+'<br>'+'场均得分：'+res.value
            }
        },
        series:[
            {
                type:'bar',
                name:'场均得分',
                data:score,
                label:{
                    show:true,
                    position:'top',
                    rotate:40,
                    distance:10
                },
                markPoint:{
                    data:[
                        {
                            type:'max',
                            name:'最大值',
                            label:{
                                show: true,
                                formatter:function (res)
                                {
                                    return res.name
                                }
                            },
                            symbolSize:[40,40],
                            symbolOffset:[0,-25]
                        },
                        {
                            type:'min',
                            name:'最小值',
                            label:{
                                show: true,
                                formatter:function (res)
                                {
                                    return res.name
                                }
                            },
                            symbolSize:[40,40],
                            symbolOffset:[0,-25]
                        }
                    ]
                }
            }
        ]
    }
    myCharts.setOption(option)
</script>
</body>
</html>